<template>
  <div class="compilationSummary-tab1">
    <div class="tableBox">
      <el-table
        v-loading="tableLoading"
        :data="tableData0"
        height="85vh"
        style="width: 100%"
        class="tableTh28"
        border
        stripe
        :span-method="arraySpanMethod"
        ref="table"
      >
        <el-table-column label="类别(单位：万元)" prop="class1" class-name="first-title"  min-width="50" fixed></el-table-column>
        <el-table-column label="类别(单位：万元)" prop="class2" class-name="second-title"  min-width="50" fixed></el-table-column>
        <el-table-column
          label="类别(单位：万元)"
          prop="verticalIndexName"
          class-name="third-title"
           min-width="100"
          fixed
        ></el-table-column>
        <el-table-column label="新增客户收入">
          <el-table-column v-for="(item1,index1) in newArr" :label="item1.month" :key="index1">
             <el-table-column  min-width="100" v-for="(item2,index2) in item1.list" :key="index2" :label="item2.horizonIndexName" :prop="'val'+(index1*3+index2)"></el-table-column>
          </el-table-column>
        </el-table-column>

      </el-table>
    </div>
    <div class="tableBox" style="margin-bottom:10px">
      <el-table
        v-loading="tableLoading"
        :data="tableData1"
        height="85vh"
        style="width: 100%"
        class="tableTh28"
        border
        stripe
        :span-method="arraySpanMethod"
        ref="table1"
      >
        <el-table-column label="类别(单位：万元)" prop="class1" class-name="first-title"  min-width="50" fixed></el-table-column>
        <el-table-column label="类别(单位：万元)" prop="class2" class-name="second-title"  min-width="50" fixed></el-table-column>
        <el-table-column
          label="类别(单位：万元)"
          prop="verticalIndexName"
          class-name="third-title"
           min-width="90"
          fixed
        ></el-table-column>
        <el-table-column label="存量客户收入">
        <el-table-column v-for="(item1,index1) in newArr" :label="item1.month" :key="index1">
           <el-table-column   min-width="90" v-for="(item2,index2) in item1.list" :key="index2" :label="item2.horizonIndexName" :prop="'val'+(index1*3+index2)"></el-table-column>
        </el-table-column>
        </el-table-column>
      </el-table>
    </div>
    <div class="tableBox" style="margin-bottom:10px">
      <el-table
        v-loading="tableLoading"
        :data="tableData2"
        height="85vh"
        style="width: 100%"
        class="tableTh28"
        border
        stripe
        :span-method="arraySpanMethod"
        ref="table2"
      >
        <el-table-column label="类别(单位：万元)" prop="class1" class-name="first-title"  min-width="50" fixed></el-table-column>
        <el-table-column label="类别(单位：万元)" prop="class2" class-name="second-title"  min-width="50" fixed></el-table-column>
        <el-table-column
          label="类别(单位：万元)"
          prop="verticalIndexName"
          class-name="third-title"
          min-width="100"
          fixed
        ></el-table-column>
        <el-table-column label="客户收入合计">
         <el-table-column v-for="(item1,index1) in newArr" :label="item1.month" :key="index1">
            <el-table-column   min-width="90" v-for="(item2,index2) in item1.list" :key="index2" :label="item2.horizonIndexName" :prop="'val'+(index1*3+index2)"></el-table-column>
         </el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { mergeTableRow, mergeSpan } from "@/utils/mixin";
export default {
  name: "compilationSummary-tab1",
  props:{
      rowData:{
          type:Array,
          default:[]
      },
      colDefList:{
          type:Array,
          default:[]
      }
  },

  data() {
    return {
      spanArr: [],
      tableData0: [],
      tableData1: [],
      tableData2: [],
        colList:[],
      newArr:[],
      tableLoading: false,
      flag:0
    };
  },
    watch:{
        rowData(val){
            this.tableData0=this.rowData[0]
            this.tableData1 = this.rowData[1];
            this.tableData2 = this.rowData[2];
        },
        colDefList(v){
            this.colList=this.colDefList[0]
            this.init()

        }
    },
  methods: {
    //table合并行
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        // if(this.tableData0.length>0){
            if (columnIndex == 0 || columnIndex == 1 || columnIndex == 2) {
                return this.spanArr[rowIndex][columnIndex];
            }
        // }

    },

    init() {
        this.newArr=[];
        this.flag=0;

        this.classify(
        this.colList
      );
      this.spanArr = mergeSpan(this.rowData[0], [
        "class1",
        "class2",
        "verticalIndexName"
      ]);
      this.tableData0 = this.rowData[0];
      this.tableData1 = this.rowData[1];
      this.tableData2 = this.rowData[2];
      setTimeout(() => {
        this.$refs.table.doLayout();
        this.$refs.table1.doLayout();
        this.$refs.table2.doLayout();
      }, 1200);
    },
    classify(arr) {
      // this.newArr=arr;

      let newArr=[];
        this.flag=0;

        arr.forEach((item, index) => {
          if (index === 0) {
              newArr.push({
                  month:item.class1,
                  list:[item]
              })
          }
          else {
              if (arr[index].class1 === arr[index - 1].class1) {
                  console.log(this.flag);
                  newArr[this.flag].list.push(item)
              } else {
                  this.flag+=1;
                  newArr.push({
                      month:item.class1,
                      list:[item]
                  });
              }
          }
      });
        this.newArr=newArr
        console.log(newArr)
    }
  }
};
</script>

<style lang="scss">
.compilationSummary-tab1 {
  .first-title.is-leaf {
    font-size: 0!important;
    position: relative;
    border-right: 1px solid #d7e5fb !important;
    .cell {
      color: #d7e5fb;
    }
  }
  .second-title.is-leaf {
    font-size: 0!important;
    position: relative;
    border-right: 1px solid #d7e5fb !important;
    .cell {
      color: #d7e5fb;
    }
  }
  .third-title.is-leaf {
    overflow: visible;
    .cell {
      transform: translateX(-50%);
      white-space: nowrap;
      overflow: visible;
    }
  }
 /deep/ .third-title .cell {
   text-align: center;
 }
}
</style>
